<template>
  <FrontSideTreeTable
    treeDataUrl="/param/positionType/getList"
    tableDataUrl="/param/partsType/getList"
    addUrl="/param/partsType/add"
    editUrl="/param/partsType/edit"
    deleteUrl="/param/partsType/delete"
    treeTitle="部位"
    :tableTitle="selectedNode.name+'部件列表'"
    searchHint="根据部件名查找"
    :tableProps="tableProps"
    :searchProps="searchProps"
    :columns="columns"
    :form="form"
    :rules="rules"
    @beforeAdd="handleAdd"
    @beforeEdit="handleEdit"
    @onTabelCreated="handleTableCreated"
    @onTreeCreated="handleTreeCreated"
    @onNodeClick="handleNodeClick">

    <template slot="afterColumns">
      <el-table-column label="主要部件" align="center" width="150">
        <template slot-scope="scope">
          <el-tag :type="scope.row.mainParts === 1?'danger':'warning'" close-transition>
            {{scope.row.mainParts === 1?"是":"否"}}
          </el-tag>
        </template>
      </el-table-column>
    </template>

    <!--对话框-->
    <template slot="form">
      <el-form-item label="所属部位" prop="positionTypeId">
        <el-select v-model="form.positionTypeId" style="width:100%" placeholder="选择所属部位" filterable>
          <el-option v-for="item of treeData" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部件名" prop="name">
        <el-input v-model="form.name" placeholder="输入部件名称"></el-input>
      </el-form-item>
      <el-form-item label="顺序号" prop="sortNo">
        <el-input type="number" v-model.number="form.sortNo" placeholder="输入顺序号"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="form.notes"></el-input>
      </el-form-item>
      <el-form-item label="主要部件">
        <el-switch v-model.number="form.mainParts" on-text="是" off-text="否" :on-value="1" :off-value="0"></el-switch>
      </el-form-item>
    </template>
  </FrontSideTreeTable>
</template>

<script>
  import FrontSideTreeTable from "../../template/FrontSideTreeTable.vue"
  import {clearFields} from "../../../assets/js/utils/ObjectUtils"
  import {intValidator} from "../../../assets/js/utils/ValidateUtils"

  let oldName = "";

  export default {
    name:"PartsTypeMaintenance",
    data() {
      //名称校验
      let nameValidator = (rule, value, callback)=>{
        if(oldName === value) {
          callback();
        } else if(this.tableData.some(item=>item.name === value)) {
          callback(new Error("部件名称重复"));
        } else {
          callback();
        }
      };

      return {
        tableData:[],
        treeData:[],
        selectedNode:{name:""},
        form:{
          name:"",
          positionTypeId:"",
          notes:"",
          sortNo:0,
          mainParts:0
        },
        rules:{
          positionTypeId:[
            {required:true, message:"请选择部位类型", trigger:"blur"}
          ],
          name:[
            {required:true, message:"请输入部件名称", trigger:"blur"},
            {validator:nameValidator, trigger:"blur"}
          ],
          sortNo:[
            {validator:intValidator, trigger:"blur"}
          ]
        },
        tableProps:{parentId:"positionTypeId"},
        searchProps:["name"],
        columns:[
          {prop:"sortNo", label:"顺序号", sortable:"custom", width:"100"},
          {prop:"name", label:"部件名"},
          {prop:"notes", label:"备注"},
        ],
      }
    },
    methods: {
      handleTableCreated(data) {
        this.tableData = data;
      },
      handleTreeCreated(data) {
        this.treeData = data;
      },
      handleNodeClick(data) {
        this.selectedNode = data;
      },
      handleAdd() {
        oldName = "";
        clearFields(this.form);
        this.form = {name:"", positionTypeId:this.selectedNode.id, notes:""};
      },
      handleEdit(data) {
        oldName = data.name;
        this.form = {...data};
      },
    },
    components:{FrontSideTreeTable}
  }
</script>



// WEBPACK FOOTER //
// PartsTypeMaintenance.vue?390a2bc6